<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">
      {{pageTitle}}
      <span class="text-subtitle1">{{pageSubTitle}}</span></div>
    <div class="q-pa-sm shadow-2 row">
      <div class="q-gutter-sm">
        <q-btn @click="detailNav.goBackToList" color="primary" icon="arrow_back" outline :title="$t('返回')" no-caps />
        <q-btn :disable="loadingState" :loading="loadingState" @click="loadModelData" color="primary" dense
          icon="refresh" outline :title="$t('刷新')" no-caps v-if="isViewOrEditMode" />
      </div>
    </div>
    <!--主要信息显示头-->
    <div class="q-py-sm q-pl-sm q-pr-md shadow-2 q-my-md" v-if="isViewOrEditMode">
      <div class="row q-gutter-sm">
        <div class="row" style="width: 300px;">
          <span class="searchbar-label col-auto">{{$t('简称')}}</span>
          <q-input class="col-grow q-ml-xs" :hide-bottom-space="true" :model-value="$d.form.abbrName" dense :maxlength="30" outlined readonly
            square stack-label>
          </q-input>
        </div>
        <div class="row" style="width: 500px;">
          <div class="searchbar-label col-auto">{{$t('中文全称')}}</div>
          <q-input class="col-grow q-ml-xs" :hide-bottom-space="true" :model-value="$d.form.fullNameC" dense :maxlength="30" outlined readonly
            square stack-label>
          </q-input>
        </div>
      </div>
    </div>
    <div :class="isCreateMode ? 'q-mt-md' : ''" class="shadow-2">
      <q-tabs active-color="primary" align="left" dense indicator-color="primary" v-model="showingTabPanel">
        <q-tab :label="$t('客商') + pageSubTitle" name="mf" no-caps />
        <q-tab :label="$t('客商别')" name="mfOrgLine" v-if="isViewOrEditMode" no-caps/>
        <q-tab :label="ldsMfOrg.tabTitle.value" name="mfOrgDetail" v-if="ldsMfOrg.isLineTabDisp.value" no-caps/>
        <q-tab :label="$t('客商联系人')" name="mfContactLine" v-if="isViewOrEditMode" no-caps/>
        <q-tab :label="ldsMfContact.tabTitle.value" name="mfContactDetail" v-if="ldsMfContact.isLineTabDisp.value" no-caps/>
        <slot :data="{'type': detailInfo.pageMode, 'form': $d.form}" name="tab" v-if="isViewOrEditMode"></slot>
        <q-tab label="附件" name="accessory" v-if="isViewOrEditMode" no-caps />
      </q-tabs>
      <q-separator />
      <q-tab-panels v-model="showingTabPanel" keep-alive
        :keep-alive-include="['mf','mfOrgLine','mfContactLine','accessory']">
        <q-tab-panel class="q-pa-sm" name="mf">
          <div class="q-gutter-sm">
            <q-btn :disable="submittingState || loadingState" :loading="submittingState" @click="doMfDataSubmit"
              color="primary" :label="$t('确定')" no-caps v-if="isCreateOrEditMode" />
            <q-btn :disable="submittingState" @click="detailNav.cancelSubmit" color="primary" :label="$t('取消')" no-caps outline
              v-if="isEditMode" />
            <q-btn :disable="loadingState" @click="detailNav.goEditMode" color="primary" icon="edit" :label="$t('编辑')" no-caps
              v-if="fx.hasModifyRight('Comm.Mf.Edit') && isViewMode" />
            <q-btn :disable="loadingState" @click="deleteMf" color="red" icon="delete_outline" :label="$t('删除')" no-caps
              v-if="fx.hasModifyRight('Comm.Mf.Edit') && isViewMode" />
          </div>
          <q-banner class="text-white bg-red q-mt-sm" dense inline-actions v-if="serverErrorMessage">
            {{serverErrorMessage}}
            <template v-slot:action>
              <q-btn @click="serverErrorMessage=''" dense flat icon="close" size="sm" />
            </template>
          </q-banner>
          <form-field-group title="主要信息" no-caps :model-with-create-update="$d.form" model-id="mfId" class="q-mt-sm">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <q-icon color="red" name="fas fa-asterisk" size="10px" />
                  <span>{{$t('简称')}}</span>
                  <q-input :error="v$.abbrName.$error" :error-message="e$(v$.abbrName.$errors)"
                    :hide-bottom-space="true"
                    :readonly="isViewMode" dense :maxlength="30" no-error-icon outlined square stack-label
                    v-model="$d.form.abbrName" autofocus>
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('额外信息')}}</span>
                  <q-icon class="q-mb-xs" color="info" name="fas fa-info">
                    <q-tooltip anchor="center right" self="center left" transition-hide="none" transition-show="none">
                      会出现在客商列表中的附加信息(可选)
                    </q-tooltip>
                  </q-icon>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.extraInfo">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('有效')}}</span>
                  <div class='bg-grey-3'>
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary" dense
                      v-model="$d.form.isEnabled" />
                  </div>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('中文全称')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="50" outlined square
                    stack-label v-model="$d.form.fullNameC">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('英文全称')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="100" outlined square
                    stack-label v-model="$d.form.fullNameE">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('账期')}}</span>
                  <q-input :error="v$.paymentDelayDays.$error" :error-message="e$(v$.paymentDelayDays.$errors)"
                    :hide-bottom-space="true"
                    :readonly="isViewMode" dense :maxlength="30" no-error-icon outlined square stack-label
                    v-model="$d.form.paymentDelayDays" />
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('海关十位编码')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="10" outlined square
                    stack-label v-model="$d.form.customsCode">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('商检十位编码')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="10" outlined square
                    stack-label v-model="$d.form.tradeCiqCode">
                  </q-input>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.isCustomer?.isShown">
                  <span>{{$t('客户')}}</span>
                  <div class='bg-grey-3'>
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary" dense
                      v-model="$d.form.isCustomer" />
                  </div>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.isVendor?.isShown">
                  <span>{{$t('供应商')}}</span>
                  <div class='bg-grey-3'>
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary" dense
                      v-model="$d.form.isVendor" />
                  </div>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.isPayer?.isShown">
                  <span>{{$t('结算方')}}</span>
                  <div class='bg-grey-3'>
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary" dense
                      v-model="$d.form.isPayer" />
                  </div>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.isStorer?.isShown">
                  <span>{{$t('货主')}}</span>
                  <div class='bg-grey-3'>
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary" dense
                      v-model="$d.form.isStorer" />
                  </div>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.isForwarder?.isShown">
                  <span>{{$t('货代')}}</span>
                  <div class='bg-grey-3'>
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary" dense
                      v-model="$d.form.isForwarder" />
                  </div>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.isCustomsBroker?.isShown">
                  <span>{{$t('报关行')}}</span>
                  <div class='bg-grey-3'>
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary" dense
                      v-model="$d.form.isCustomsBroker" />
                  </div>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.isCarrier?.isShown">
                  <span>{{$t('运输行')}}</span>
                  <div class='bg-grey-3'>
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary" dense
                      v-model="$d.form.isCarrier" />
                  </div>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.isConsignee?.isShown">
                  <span>{{$t('收货人')}}</span>
                  <div class='bg-grey-3'>
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary" dense
                      v-model="$d.form.isConsignee" />
                  </div>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.isEndUser?.isShown">
                  <span>{{$t('终端用户')}}</span>
                  <div class='bg-grey-3'>
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary" dense
                      v-model="$d.form.isEndUser" />
                  </div>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.isDecClient?.isShown">
                  <span>{{$t('报关行委托方')}}</span>
                  <div class='bg-grey-3'>
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary" dense
                      v-model="$d.form.isDecClient" />
                  </div>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.isTradeProxy?.isShown">
                  <span>{{$t('商贸代理')}}</span>
                  <div class='bg-grey-3'>
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary" dense
                      v-model="$d.form.isTradeProxy" />
                  </div>
                </div>
              </div>
            </div>
          </form-field-group>
          <form-field-group class="q-mt-md" title="商务联系方式" no-caps>
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm q-pb-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('联系人')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.bizContactP">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('联系电话')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.bizPhone">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('邮箱')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.bizEmail">
                  </q-input>
                </div>
                <div class="col-12">
                  <span>{{$t('地址')}}</span>
                  <q-input :dense="true" :hide-bottom-space="true" :readonly="isViewMode" autogrow :maxlength="300"
                    outlined square stack-label type="textarea" v-model="$d.form.bizAddress">
                  </q-input>
                </div>
              </div>
            </div>
          </form-field-group>
          <form-field-group class="q-mt-md" title="收发货联系方式" no-caps>
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm q-pb-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('联系人')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.shipContactP">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('联系电话')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.shipPhone">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('邮箱')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.shipEmail">
                  </q-input>
                </div>
                <div class="col-12">
                  <span>{{$t('地址')}}</span>
                  <q-input :dense="true" :hide-bottom-space="true" :readonly="isViewMode" autogrow :maxlength="300"
                    outlined square stack-label type="textarea" v-model="$d.form.shipAddress">
                  </q-input>
                </div>
              </div>
            </div>
          </form-field-group>
          <form-field-group class="q-mt-md" title="财务联系方式" no-caps>
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm q-pb-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('联系人')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.billContactP">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('联系电话')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.billPhone">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('邮箱')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.billEmail">
                  </q-input>
                </div>
                <div class="col-12">
                  <span>{{$t('地址')}}</span>
                  <q-input :dense="true" :hide-bottom-space="true" :readonly="isViewMode" autogrow :maxlength="300"
                    outlined square stack-label type="textarea" v-model="$d.form.billAddress">
                  </q-input>
                </div>
              </div>
            </div>
          </form-field-group>
          <form-field-group class="q-mt-md" title="公司联系方式" no-caps>
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm q-pb-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('联系人')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.contactP">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('联系电话')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.phone">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('邮箱')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.email">
                  </q-input>
                </div>
              </div>
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('网址')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="100" outlined square
                    stack-label v-model="$d.form.website">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('邮编')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.postcode">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('传真')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.fax">
                  </q-input>
                </div>
                <div class="col-12">
                  <span>{{$t('地址')}}</span>
                  <q-input :dense="true" :hide-bottom-space="true" :readonly="isViewMode" autogrow :maxlength="300"
                    outlined square stack-label type="textarea" v-model="$d.form.mfAddress">
                  </q-input>
                </div>
              </div>
            </div>
          </form-field-group>
          <form-field-group class="q-mt-md" title="财务开票信息" no-caps>
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('社会信用代码')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.enterpriseCode">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('联系电话')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.invoicePhone">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('开户银行')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.bank">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>{{$t('银行账户')}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" outlined square
                    stack-label v-model="$d.form.bankAccount">
                  </q-input>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12">
                  <span>{{$t('地址')}}</span>
                  <q-input :dense="true" :hide-bottom-space="true" :readonly="isViewMode" autogrow :maxlength="300"
                    outlined square stack-label type="textarea" v-model="$d.form.invoiceAddress">
                  </q-input>
                </div>
              </div>
            </div>
          </form-field-group>
          <form-field-group class="q-mt-md" title="其它信息" no-caps>
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.userDef1?.isShown">
                  <span>{{$d.actualFieldLabel.userDef1}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense outlined square stack-label
                    v-model="$d.form.userDef1">
                  </q-input>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.userDef2?.isShown">
                  <span>{{$d.actualFieldLabel.userDef2}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense outlined square stack-label
                    v-model="$d.form.userDef2">
                  </q-input>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.userDef3?.isShown">
                  <span>{{$d.actualFieldLabel.userDef3}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense outlined square stack-label
                    v-model="$d.form.userDef3">
                  </q-input>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.userDef4?.isShown">
                  <span>{{$d.actualFieldLabel.userDef4}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense outlined square stack-label
                    v-model="$d.form.userDef4">
                  </q-input>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.userDef5?.isShown">
                  <span>{{$d.actualFieldLabel.userDef5}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense outlined square stack-label
                    v-model="$d.form.userDef5">
                  </q-input>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.userDef6?.isShown">
                  <span>{{$d.actualFieldLabel.userDef6}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense outlined square stack-label
                    v-model="$d.form.userDef6">
                  </q-input>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.userDef7?.isShown">
                  <span>{{$d.actualFieldLabel.userDef7}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense outlined square stack-label
                    v-model="$d.form.userDef7">
                  </q-input>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.userDef8?.isShown">
                  <span>{{$d.actualFieldLabel.userDef8}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense outlined square stack-label
                    v-model="$d.form.userDef8">
                  </q-input>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.userDef9?.isShown">
                  <span>{{$d.actualFieldLabel.userDef9}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense outlined square stack-label
                    v-model="$d.form.userDef9">
                  </q-input>
                </div>
                <div class="col-12 col-sm-4 col-md-3 col-lg-2" v-if="$d.actualFieldShown.userDef10?.isShown">
                  <span>{{$d.actualFieldLabel.userDef10}}</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense outlined square stack-label
                    v-model="$d.form.userDef10">
                  </q-input>
                </div>
                <div class="col-12">
                  <span>描述</span>
                  <q-input :dense="true" :hide-bottom-space="true" :readonly="isViewMode" autogrow :maxlength="300"
                    outlined square stack-label type="textarea" v-model="$d.form.descriptions">
                  </q-input>
                </div>
              </div>
            </div>
          </form-field-group>
        </q-tab-panel>
        <q-tab-panel class="q-pa-none" name="mfOrgLine" v-if="isViewOrEditMode">
          <q-table :columns="columnsInfoMfOrg" :rows="$d.form.mfOrgs" v-model:pagination="$d.paginationInfoMfOrg"
            :hide-pagination="true" @row-dblclick="(evt,row)=>{ldhMfOrg.lineDetailNav.goViewLine(row.mfOrgId)}" dense
            row-key="mfOrgId" separator="cell" flat :visible-columns="$d.visibleColumnsMfOrg" :loading="loadingState"
            color="primary">
            <template v-slot:top="props">
              <div class="q-gutter-sm">
                <q-btn @click="createMfOrgLine" color="primary" icon="add" :label="$t('新建')" no-caps
                  v-if="fx.hasModifyRight('Comm.Mf.Edit')" :disable="loadingState" />
              </div>
              <q-space />
              <table-col-options-cfg v-model:table-columns="columnsInfoMfOrg"
                v-model:visible-columns="$d.visibleColumnsMfOrg"
                @update-col-options-for-save="(optToSave)=>dlAssist.saveDetailColOptions('mfOrgLine',optToSave)"
                class="q-ml-sm">
              </table-col-options-cfg>
              <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"
                :title="props.inFullscreen ? $t('退出全屏') : $t('全屏显示')" class="q-ml-sm" dense flat :ripple="false" />
            </template>
            <template v-slot:body-cell-operation="props">
              <q-td :props="props" auto-width>
                <q-btn :dense="true" :disable="loadingState" class="btn-in-row"
                  @click="ldhMfOrg.lineDetailNav.goViewLine(props.row.mfOrgId)" color="primary" :label="$t('查看')" no-caps />
                <q-btn :dense="true" :disable="loadingState"
                  @click="ldhMfOrg.lineDetailNav.goEditLine(props.row.mfOrgId)" class="q-ml-xs btn-in-row"
                  color="primary" :label="$t('编辑')" no-caps v-if="fx.hasModifyRight('Comm.Mf.Edit')" />
                <q-btn :dense="true" :disable="loadingState"
                  @click="deleteMfOrgLine(props.row.mfOrgId)" class="q-ml-xs btn-in-row" color="red" :label="$t('删除')" no-caps
                  v-if="fx.hasModifyRight('Comm.Mf.Edit')" />
              </q-td>
            </template>
            <!--状态列插槽-->
            <template v-slot:body-cell-state="props">
              <q-td :props="props" auto-width>
                <q-badge :color="props.row.isEnabled ? 'positive' : 'negative'"
                  :label="props.row.isEnabled ? $t('有效') : $t('无效')" />
              </q-td>
            </template>
            <template v-slot:no-data>
              <div class="full-width text-center">
                <q-icon name="error_outline" />
                {{$t('无数据')}}
              </div>
            </template>
            <template v-slot:bottom>
              <paging-bar :loading-state="loadingState" :pageNo="$d.paginationInfoMfOrg.page"
                :pageSize="$d.paginationInfoMfOrg.rowsPerPage" :restrict-input-page-no="true"
                :show-refresh-button="false" :totalAmount="$d.form.mfOrgs.length"
                @go-to-page="(pageNo)=>{$d.paginationInfoMfOrg.page=pageNo}"
                @pagesize-changed="(pageSize)=>{$d.paginationInfoMfOrg.rowsPerPage=pageSize; dlAssist.saveDetailPageSize('mfOrgLine',pageSize)}" />
            </template>
          </q-table>
        </q-tab-panel>
        <q-tab-panel class="q-pa-sm" name="mfOrgDetail">
          <div class="q-gutter-sm">
            <id-create-update-disp :model-with-create-update="ldhMfOrg.lineDetailInfo.lineForm" class="float-right"
              model-id="mfOrgId" />
            <q-btn @click="ldhMfOrg.lineDetailNav.backToListTab" color="primary" icon="close" outline :title="$t('关闭')" no-caps
              v-if="ldsMfOrg.isLineViewMode.value" />
            <q-btn :disable="lineLoadingStateMfOrg" :loading="lineLoadingStateMfOrg"
              @click="loadLineModelDataMfOrg" color="primary" dense
              icon="refresh" outline :title="$t('刷新')" no-caps v-if="ldsMfOrg.isLineViewOrEditMode.value" />
            <q-btn :loading="submittingStateMfOrg" @click="doMfOrgLineSubmit" color="primary" :label="$t('确定')" no-caps
              v-if="ldsMfOrg.isLineCreateOrEditMode.value" :disable="loadingState" />
            <q-btn :disable="submittingStateMfOrg" @click="ldhMfOrg.lineDetailNav.cancelLineSubmit" :label="$t('取消')" no-caps outline
              v-if="ldsMfOrg.isLineCreateOrEditMode.value" color="primary" />
            <q-btn :disable="lineLoadingStateMfOrg" @click="ldhMfOrg.lineDetailNav.turnLineToEditMode()"
              color="primary" icon="edit" :label="$t('编辑')" no-caps
              v-if="fx.hasModifyRight('Comm.Mf.Edit') && ldsMfOrg.isLineViewMode.value" />
            <q-btn :disable="lineLoadingStateMfOrg"
              @click="deleteMfOrgLine(ldhMfOrg.lineDetailInfo.lineItemId)" color="red" icon="delete_outline" :label="$t('删除')" no-caps
              v-if="fx.hasModifyRight('Comm.Mf.Edit') && ldsMfOrg.isLineViewMode.value" />
          </div>
          <q-banner class="text-white bg-red q-mt-sm" dense inline-actions v-if="serverErrorMessageMfOrg">
            {{serverErrorMessageMfOrg}}
            <template v-slot:action>
              <q-btn @click="serverErrorMessageMfOrg=''" dense flat icon="close" size="sm" />
            </template>
          </q-banner>
          <div class="q-pt-sm">
            <div class="row q-col-gutter-sm">
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <q-icon color="red" name="fas fa-asterisk" size="10px" />
                <span>{{$t('客商别名称')}}</span>
                <q-input :error="v$mfOrg.mfOrgName.$error" :error-message="e$(v$mfOrg.mfOrgName.$errors)"
                  :hide-bottom-space="true"
                  :readonly="ldsMfOrg.isLineViewMode.value" dense :maxlength="30" no-error-icon outlined square
                  stack-label v-model="ldhMfOrg.lineDetailInfo.lineForm.mfOrgName" autofocus>
                </q-input>
              </div>
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <span>{{$t('有效')}}</span>
                <div class='bg-grey-3'>
                  <q-checkbox :disable="ldsMfOrg.isLineViewMode.value" class="full-width q-pa-xs" color="primary" dense
                    label="有效" v-model="ldhMfOrg.lineDetailInfo.lineForm.isEnabled" />
                </div>
              </div>
            </div>
            <div class="row q-col-gutter-sm q-pt-sm">
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <span>{{$t('电话')}}</span>
                <q-input :hide-bottom-space="true" :readonly="ldsMfOrg.isLineViewMode.value" dense :maxlength="30"
                  outlined square stack-label v-model="ldhMfOrg.lineDetailInfo.lineForm.phone">
                </q-input>
              </div>
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <span>{{$t('传真')}}</span>
                <q-input :hide-bottom-space="true" :readonly="ldsMfOrg.isLineViewMode.value" dense :maxlength="30"
                  outlined square stack-label v-model="ldhMfOrg.lineDetailInfo.lineForm.fax">
                </q-input>
              </div>
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <span>{{$t('邮箱')}}</span>
                <q-input :hide-bottom-space="true" :readonly="ldsMfOrg.isLineViewMode.value" dense :maxlength="30"
                  outlined square stack-label v-model="ldhMfOrg.lineDetailInfo.lineForm.email">
                </q-input>
              </div>
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <span>{{$t('联系人')}}</span>
                <q-input :hide-bottom-space="true" :readonly="ldsMfOrg.isLineViewMode.value" dense outlined square
                  stack-label v-model="ldhMfOrg.lineDetailInfo.lineForm.contactP">
                </q-input>
              </div>

              <div class="col-12">
                <span>{{$t('客商别地址')}}</span>
                <q-input :dense="true" :hide-bottom-space="true" :readonly="ldsMfOrg.isLineViewMode.value" autogrow
                  :maxlength="300" outlined square stack-label type="textarea"
                  v-model="ldhMfOrg.lineDetailInfo.lineForm.shipToAddr">
                </q-input>
              </div>

              <div class="col-12">
                <span>{{$t('发票/账单地址')}}</span>
                <q-input :dense="true" :hide-bottom-space="true" :readonly="ldsMfOrg.isLineViewMode.value" autogrow
                  :maxlength="300" outlined square stack-label type="textarea"
                  v-model="ldhMfOrg.lineDetailInfo.lineForm.billToAddr">
                </q-input>
              </div>

              <div class="col-12">
                <span>{{$t('描述')}}</span>
                <q-input :dense="true" :hide-bottom-space="true" :readonly="ldsMfOrg.isLineViewMode.value" autogrow
                  :maxlength="300" outlined square stack-label type="textarea"
                  v-model="ldhMfOrg.lineDetailInfo.lineForm.descriptions">
                </q-input>
              </div>
            </div>
          </div>
        </q-tab-panel>
        <q-tab-panel class="q-pa-none" name="mfContactLine" v-if="isViewOrEditMode">
          <q-table :columns="columnsInfoMfContact" :rows="$d.form.mfContacts"
            v-model:pagination="$d.paginationInfoMfContact"
            :hide-pagination="true" @row-dblclick="(evt,row)=>{ldhMfContact.lineDetailNav.goViewLine(row.contactId)}"
            dense
            row-key="contactId" separator="cell" flat :visible-columns="$d.visibleColumnsMfContact"
            :loading="loadingState"
            color="primary">
            <template v-slot:top="props">
              <div class="q-gutter-sm">
                <q-btn @click="createMfContactLine" color="primary" icon="add" :label="$t('新建')" no-caps
                  v-if="fx.hasModifyRight('Comm.Mf.Edit')" :disable="loadingState" />
              </div>
              <q-space />
              <table-col-options-cfg v-model:table-columns="columnsInfoMfContact"
                v-model:visible-columns="$d.visibleColumnsMfContact"
                @update-col-options-for-save="(optToSave)=>dlAssist.saveDetailColOptions('mfContactLine',optToSave)"
                class="q-ml-sm">
              </table-col-options-cfg>
              <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"
                :title="props.inFullscreen ? $t('退出全屏') : $t('全屏显示')" class="q-ml-sm" dense flat :ripple="false" />
            </template>
            <template v-slot:body-cell-operation="props">
              <q-td :props="props" auto-width>
                <q-btn :dense="true" :disable="loadingState"
                  @click="ldhMfContact.lineDetailNav.goViewLine(props.row.contactId)" color="primary" :label="$t('查看')" no-caps
                  class="btn-in-row" />
                <q-btn :dense="true" :disable="loadingState"
                  @click="ldhMfContact.lineDetailNav.goEditLine(props.row.contactId)" class="q-ml-xs btn-in-row"
                  color="primary" :label="$t('编辑')" no-caps v-if="fx.hasModifyRight('Comm.Mf.Edit')" />
                <q-btn :dense="true" :disable="loadingState"
                  @click="deleteMfContactLine(props.row.contactId)" class="q-ml-xs btn-in-row" color="red" :label="$t('删除')" no-caps
                  v-if="fx.hasModifyRight('Comm.Mf.Edit')" />
              </q-td>
            </template>
            <template v-slot:body-cell-sex="props">
              <q-td :props="props" auto-width>
                {{props.row.sex === 'M' ? $t('男') : props.row.sex === 'F' ? $t('女') : ''}}
              </q-td>
            </template>
            <template v-slot:body-cell-contactState="props">
              <q-td :props="props" auto-width>
                {{props.row.contactState === '0' ? $t('离职') : props.row.contactState === '1' ? $t('在职') : ''}}
              </q-td>
            </template>
            <template v-slot:no-data>
              <div class="full-width text-center">
                <q-icon name="error_outline" />
                {{$t('无数据')}}
              </div>
            </template>
            <template v-slot:bottom>
              <paging-bar :loading-state="loadingState" :pageNo="$d.paginationInfoMfContact.page"
                :pageSize="$d.paginationInfoMfContact.rowsPerPage" :restrict-input-page-no="true"
                :show-refresh-button="false" :totalAmount="$d.form.mfContacts.length"
                @go-to-page="(pageNo)=>{$d.paginationInfoMfContact.page=pageNo}"
                @pagesize-changed="(pageSize)=>{$d.paginationInfoMfContact.rowsPerPage=pageSize; dlAssist.saveDetailPageSize('mfContactLine',pageSize)}" />
            </template>
          </q-table>
        </q-tab-panel>
        <q-tab-panel class="q-pa-sm" name="mfContactDetail">
          <div class="q-gutter-sm">
            <id-create-update-disp :model-with-create-update="ldhMfContact.lineDetailInfo.lineForm" class="float-right"
              model-id="contactId" />
            <q-btn @click="ldhMfContact.lineDetailNav.backToListTab" color="primary" icon="close" outline :title="$t('关闭')" no-caps
              v-if="ldsMfContact.isLineViewMode.value" />
            <q-btn :disable="lineLoadingStateMfContact" :loading="lineLoadingStateMfContact"
              @click="loadLineModelDataMfContact" color="primary" dense
              icon="refresh" outline :title="$t('刷新')" no-caps v-if="ldsMfContact.isLineViewOrEditMode.value" />
            <q-btn :loading="submittingStateMfContact" @click="doMfContactLineSubmit" color="primary" :title="$t('确定')" no-caps
              v-if="ldsMfContact.isLineCreateOrEditMode.value" :disable="loadingState" />
            <q-btn :disable="submittingStateMfContact" @click="ldhMfContact.lineDetailNav.cancelLineSubmit" :title="$t('取消')" no-caps
              outline
              v-if="ldsMfContact.isLineCreateOrEditMode.value" color="primary" />
            <q-btn :disable="lineLoadingStateMfContact" @click="ldhMfContact.lineDetailNav.turnLineToEditMode()"
              color="primary" icon="edit" :title="$t('编辑')" no-caps
              v-if="fx.hasModifyRight('Comm.Mf.Edit') && ldsMfContact.isLineViewMode.value" />
            <q-btn :disable="lineLoadingStateMfContact"
              @click="deleteMfContactLine(ldhMfContact.lineDetailInfo.lineItemId)" color="red" icon="delete_outline"
              :title="$t('删除')" no-caps v-if="fx.hasModifyRight('Comm.Mf.Edit') && ldsMfContact.isLineViewMode.value" />
          </div>
          <q-banner class="text-white bg-red q-mt-sm" dense inline-actions v-if="serverErrorMessageMfContact">
            {{serverErrorMessageMfContact}}
            <template v-slot:action>
              <q-btn @click="serverErrorMessageMfContact=''" dense flat icon="close" size="sm" />
            </template>
          </q-banner>
          <div class="q-pt-sm">
            <div class="row q-col-gutter-sm">
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <q-icon color="red" name="fas fa-asterisk" size="10px" />
                <span>{{$t('姓名')}}</span>
                <q-input :error="v$mfContact.contactName.$error"
                  :error-message="e$(v$mfContact.contactName.$errors)" :hide-bottom-space="true"
                  :readonly="ldsMfContact.isLineViewMode.value" dense :maxlength="30" no-error-icon outlined square
                  stack-label v-model="ldhMfContact.lineDetailInfo.lineForm.contactName">
                </q-input>
              </div>
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <span>{{$t('性别')}}</span>
                <simple-filter-select :readonly="ldsMfContact.isLineViewMode.value" :options="sexList"
                  v-model="ldhMfContact.lineDetailInfo.lineForm.sex" :use-filter="false" />
              </div>
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <span>{{$t('生日')}}</span>
                <q-input :error="v$mfContact.birthday.$error" :error-message="e$(v$mfContact.birthday.$errors)"
                  :hide-bottom-space="true"
                  clearable dense no-error-icon outlined square stack-label
                  v-model="ldhMfContact.lineDetailInfo.lineForm.birthday" :readonly="ldsMfContact.isLineViewMode.value">
                  <q-menu :fit="false" ref="dtp-container-1" transition-hide="none" transition-show="none"
                    v-if="ldsMfContact.isLineCreateOrEditMode.value">
                    <q-date :title="ldhMfContact.lineDetailInfo.lineForm.birthday"
                      @update:model-value="() => $refs['dtp-container-1'].hide()"
                      mask="YYYY-MM-DD" :subtitle="$t('当前选中日期')" today-btn
                      v-model="ldhMfContact.lineDetailInfo.lineForm.birthday" />
                  </q-menu>
                  <template v-slot:append v-if="ldsMfContact.isLineCreateOrEditMode.value">
                    <q-icon name="event" />
                  </template>
                </q-input>
              </div>
            </div>

            <div class="row q-col-gutter-sm q-pt-sm">
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <span>{{$t('职位')}}</span>
                <q-input :hide-bottom-space="true" :readonly="ldsMfContact.isLineViewMode.value" dense :maxlength="30"
                  outlined square stack-label v-model="ldhMfContact.lineDetailInfo.lineForm.position">
                </q-input>
              </div>
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <span>{{$t('状态')}}</span>
                <simple-filter-select :readonly="ldsMfContact.isLineViewMode.value" :options="contactStateList"
                  v-model="ldhMfContact.lineDetailInfo.lineForm.contactState" :use-filter="false" />
              </div>
            </div>

            <div class="row q-col-gutter-sm q-pt-sm">
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <span>{{$t('电话')}}</span>
                <q-input :hide-bottom-space="true" :readonly="ldsMfContact.isLineViewMode.value" dense :maxlength="30"
                  outlined square stack-label v-model="ldhMfContact.lineDetailInfo.lineForm.phone">
                </q-input>
              </div>
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <span>{{$t('手机')}}</span>
                <q-input :hide-bottom-space="true" :readonly="ldsMfContact.isLineViewMode.value" dense :maxlength="30"
                  outlined square stack-label v-model="ldhMfContact.lineDetailInfo.lineForm.mobile">
                </q-input>
              </div>
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <span>{{$t('邮箱')}}</span>
                <q-input :hide-bottom-space="true" :readonly="ldsMfContact.isLineViewMode.value" dense :maxlength="30"
                  outlined square stack-label v-model="ldhMfContact.lineDetailInfo.lineForm.email">
                </q-input>
              </div>
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <span>{{$t('个人喜好')}}</span>
                <q-input :hide-bottom-space="true" :readonly="ldsMfContact.isLineViewMode.value" dense outlined square
                  stack-label v-model="ldhMfContact.lineDetailInfo.lineForm.hobby">
                </q-input>
              </div>
              <div class="col-12">
                <span>{{$t('家庭地址')}}</span>
                <q-input :dense="true" :hide-bottom-space="true" :readonly="ldsMfContact.isLineViewMode.value" autogrow
                  :maxlength="300" outlined square stack-label type="textarea"
                  v-model="ldhMfContact.lineDetailInfo.lineForm.homeAddress">
                </q-input>
              </div>
              <div class="col-12">
                <span>{{$t('描述')}}</span>
                <q-input :dense="true" :hide-bottom-space="true" :readonly="ldsMfContact.isLineViewMode.value" autogrow
                  :maxlength="300" outlined square stack-label type="textarea"
                  v-model="ldhMfContact.lineDetailInfo.lineForm.descriptions">
                </q-input>
              </div>
            </div>
          </div>
        </q-tab-panel>
        <slot :data="{'type': detailInfo.pageMode, 'form': $d.form}" name="panel"></slot>
        <q-tab-panel class="q-pa-none" name="accessory" v-if="isViewOrEditMode">
          <accessory right-name-for-edit="Comm.Mf.Edit" :storage-id="detailInfo.itemId"
            delete-url="/comm/mf/delete-mf-attachments"
            recomment-url="/comm/mf/recomment-mf-attachment" storage-class="comm-mf"
            upload-url="/comm/mf/upload-mf-attachments/" :enable-pack-download="props.enableAccessoryPackDownload">
          </accessory>
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'mfStd',
}
</script>
<script lang="ts" setup>
import {useTitleHelper} from '../../hooks/titleHelper'
import {ColumnInfo, GenericDropdownListItem, MfFieldOptionsDef} from '../../defs/comm'
import {useDetailHelper} from '../../hooks/detailHelper'
import {computed, reactive, ref} from 'vue'
import {MfFullForImport, MfOrgFull} from '../../defs/mf'
import useVuelidate from '@vuelidate/core'
import _ from 'lodash'
import {useLineDetailHelper} from '../../hooks/lineDetailHelper'
import { useI18n } from 'vue-i18n'
import FormFieldGroup from 'src/lib/components/FormFieldGroup.vue'
const {t} = useI18n()

interface PropsDef {
  // 页面选项，字段选项
  fieldOptions?: MfFieldOptionsDef
  // 启用附件下载
  enableAccessoryPackDownload?: boolean
}

let props = withDefaults(defineProps<PropsDef>(), {
  fieldOptions: () => {
    return {}
  },
  enableAccessoryPackDownload: false,
})

const pageTitle = t('客商管理')
useTitleHelper(pageTitle)

const validators = $f.validators

// 当前正在显示的tab
let showingTabPanel = ref('mf')

let $d = reactive({
  form: {} as MfFullForImport,
  // 实际字段开关状态(与props混合后的结果)
  actualFieldShown: {
    isCustomer: {
      isShown: true,
    },
    isVendor: {
      isShown: true,
    },
    isPayer: {
      isShown: true,
    },
    isStorer: {
      isShown: true,
    },
    isForwarder: {
      isShown: true,
    },
    isCustomsBroker: {
      isShown: true,
    },
    isCarrier: {
      isShown: true,
    },
    isConsignee: {
      isShown: true,
    },
    isEndUser: {
      isShown: true,
    },
    isDecClient: {
      isShown: true,
    },
    isTradeProxy: {
      isShown: true,
    },
    userDef1: {
      isShown: false,
    },
    userDef2: {
      isShown: false,
    },
    userDef3: {
      isShown: false,
    },
    userDef4: {
      isShown: false,
    },
    userDef5: {
      isShown: false,
    },
    userDef6: {
      isShown: false,
    },
    userDef7: {
      isShown: false,
    },
    userDef8: {
      isShown: false,
    },
    userDef9: {
      isShown: false,
    },
    userDef10: {
      isShown: false,
    },
  } as MfFieldOptionsDef,
  // 实际字段开关状态(与props混合后的结果)
  actualFieldLabel: {
    userDef1: '自定义1',
    userDef2: '自定义2',
    userDef3: '自定义3',
    userDef4: '自定义4',
    userDef5: '自定义5',
    userDef6: '自定义6',
    userDef7: '自定义7',
    userDef8: '自定义8',
    userDef9: '自定义9',
    userDef10: '自定义10',
  } as Record<string, string>,
  // mgOrg列表显示
  visibleColumnsMfOrg: [] as string[],
  // mgOrg分页参数
  paginationInfoMfOrg: {
    // 页码
    page: 1,
    // 每页多少条
    rowsPerPage: 40,
    // 是否倒序
    descending: false,
    // 按什么排序
    sortBy: 'sortId',
  },
  // MfContact列表显示
  visibleColumnsMfContact: [] as string [],
  // MfContact分页参数
  paginationInfoMfContact: {
    // 页码
    page: 1,
    // 每页多少条
    rowsPerPage: 40,
    // 是否倒序
    descending: false,
    // 按什么排序
    sortBy: 'sortId',
  },
})

// region 主档相关
// 新建时候的默认值
const defFormDataForCreate = {
  isCustomer: false,
  isVendor: false,
  isPayer: false,
  isStorer: false,
  isForwarder: false,
  isCustomsBroker: false,
  isCarrier: false,
  isConsignee: false,
  isEndUser: false,
  isDecClient: false,
  isTradeProxy: false,
  isEnabled: true,
}
// 错误信息内容
let serverErrorMessage = ref('')
// 数据加载状态
let loadingState = ref(false)

// 主档数据
const loadModelData = function () {
  serverErrorMessage.value = ''
  loadingState.value = true
  $f.axios
    .get<MfFullForImport>('/comm/mf/get-mf-by-id/' + detailInfo.itemId)
    .then((resp) => {
      $d.form = resp.data
      // 判断是否需要关闭详情页
      if (ldhMfOrg.lineDetailInfo.lineItemId) {
        if (!_.find($d.form.mfOrgs, {mfOrgId: ldhMfOrg.lineDetailInfo.lineItemId})) {
          ldhMfOrg.lineDetailNav.backToListTab()
        }
      }
      if (ldhMfContact.lineDetailInfo.lineItemId) {
        if (!_.find($d.form.mfContacts, {contactId: ldhMfContact.lineDetailInfo.lineItemId})) {
          ldhMfContact.lineDetailNav.backToListTab()
        }
      }
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      loadingState.value = false
    })
}

// 主档验证相关
const rulesMf = {
  abbrName: {
    required: validators.required,
    mfAbbrName: validators.mfAbbrName,
  },
  paymentDelayDays: {
    int32: validators.int32,
    greaterThan: validators.greaterThan(0),
  },
}
const v$ = useVuelidate(rulesMf, computed(() => $d.form), {$autoDirty: true})

// 主档帮助方法
const {
  detailInfo,
  detailStatus,
  detailNav,
  dlAssist,
} = useDetailHelper('/comm/basic/mf',
  $d.form,
  defFormDataForCreate,
  '/comm/basic/mf',
  '/comm/basic/mf/detail',
  '/comm/basic/mf/create',
  '/comm/basic/mf/edit',
  loadModelData,
  serverErrorMessage,
)
const {
  isViewMode,
  isCreateMode,
  isEditMode,
  isCreateOrEditMode,
  isViewOrEditMode,
  pageSubTitle,
} = detailStatus

// 删除主档
const deleteMf = function () {
  void $f.ui.messageBox({
    caption: t('操作确认'),
    text: t('确定要删除该客商吗?'),
    icon: 'Warning',
    buttons: 'OkCancel',
    delayClose: true,
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/comm/mf/delete-mf/' + detailInfo.itemId)
        .then(() => {
          $f.ui.closeMsgBox()
          detailNav.goBackToList()
        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: t('删除失败'),
            text: $f.getAxiosErrMsg(err),
            icon: $f.getAxiosErrIcon(err),
            buttons: 'Close',
          })
        })
    }
  })
}

let submittingState = ref(false)
// 主档新建/编辑确定
const doMfDataSubmit = function () {
  serverErrorMessage.value = ''
  void v$.value
    .$validate()
    .then((valRes) => {
      if (valRes) {
        let formParam = $f.misc.makeSimpleFormObj($d.form, ['mfContacts', 'mfOrgs'])
        if (isCreateMode.value) {
          submittingState.value = true
          $f.axios
            .post('/comm/mf/create-mf', formParam)
            .then(() => {
              detailNav.goBackToList()
            })
            .catch((err) => {
              serverErrorMessage.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingState.value = false
            })
        } else if (isEditMode.value) {
          submittingState.value = true
          $f.axios
            .post('/comm/mf/update-mf', formParam)
            .then(() => {
              detailNav.doneEdit()
            })
            .catch((err) => {
              serverErrorMessage.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingState.value = false
            })
        }
      }
    })
}
// endregion

// region 客商别数据相关
// mfOrg 列参数
let columnsInfoMfOrg: ColumnInfo[] = [
  {
    label: t('操作'),
    name: 'operation',
    field: 'operation',
    align: 'left',
    defOrder: 1,
    defVisible: true,
  },
  {
    label: t('客商别名称'),
    name: 'mfOrgName',
    field: 'mfOrgName',
    align: 'left',
    defOrder: 2,
    defVisible: true,
  },
  {
    label: t('电话'),
    name: 'phone',
    field: 'phone',
    align: 'left',
    defOrder: 3,
    defVisible: true,
  },
  {
    label: t('传真'),
    name: 'fax',
    field: 'fax',
    align: 'left',
    defOrder: 4,
    defVisible: true,
  },
  {
    label: t('邮箱'),
    name: 'email',
    field: 'email',
    align: 'left',
    defOrder: 5,
    defVisible: true,
  },
  {
    label: t('联系人'),
    name: 'contactP',
    field: 'contactP',
    align: 'left',
    defOrder: 6,
    defVisible: true,
  },
  {
    label: t('客商别地址'),
    name: 'shipToAddr',
    field: 'shipToAddr',
    align: 'left',
    defOrder: 7,
    defVisible: true,
  },
  {
    label: t('发票/账单地址'),
    name: 'billToAddr',
    field: 'billToAddr',
    align: 'left',
    defOrder: 8,
    defVisible: true,
  },
  {
    label: t('描述'),
    name: 'descriptions',
    field: 'descriptions',
    align: 'left',
    defOrder: 9,
    defVisible: true,
  },
  {
    label: t('状态'),
    name: 'state',
    field: 'state',
    align: 'left',
    defOrder: 10,
    defVisible: true,
  },
]

// 错误信息内容
let serverErrorMessageMfOrg = ref('')
// 加载状态
let lineLoadingStateMfOrg = ref(false)

// 客商别数据详情
const loadLineModelDataMfOrg = function () {
  lineLoadingStateMfOrg.value = true
  $f.axios
    .get<MfOrgFull>('/comm/mf/get-mf-org-by-id/' + (ldhMfOrg.lineDetailInfo.lineItemId as string | number).toString())
    .then((resp) => {
      ldhMfOrg.lineDetailInfo.lineForm = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      lineLoadingStateMfOrg.value = false
    })
}

const ldhMfOrg = useLineDetailHelper(
  t('客商别数据'),
  'mfOrgLine',
  'mfOrgDetail',
  null,
  loadLineModelDataMfOrg,
  showingTabPanel,
  serverErrorMessageMfOrg,
  () => {
    v$mfOrg.value.$reset()
  },
)

const ldsMfOrg = ldhMfOrg.lineDetailStatus
// 新建明细
const createMfOrgLine = function () {
  ldhMfOrg.lineDetailNav.goCreateLine({
    mfId: $d.form.mfId,
    isEnabled: true,
  })
}

// 客商别验证
const rulesMfOrg = {
  mfOrgName: {
    required: validators.required,
    mfAbbrName: validators.mfAbbrName,
  },
}

const v$mfOrg = useVuelidate(rulesMfOrg, computed(() => ldhMfOrg.lineDetailInfo.lineForm as any), {$autoDirty: true})

// 提交状态
let submittingStateMfOrg = ref(false)

// 新建/编辑确定
const doMfOrgLineSubmit = function () {
  serverErrorMessageMfOrg.value = ''
  void v$mfOrg.value
    .$validate()
    .then((valRes) => {
      if (valRes) {
        let lineFormParam = $f.misc.removePropertyOfNull(ldhMfOrg.lineDetailInfo.lineForm)
        if (ldsMfOrg.isLineCreateMode.value) {
          submittingStateMfOrg.value = true
          $f.axios
            .post('/comm/mf/create-mf-org', lineFormParam)
            .then(() => {
              ldhMfOrg.lineDetailNav.backToListTab()
              loadModelData()
            })
            .catch((err) => {
              serverErrorMessageMfOrg.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingStateMfOrg.value = false
            })

        } else if (ldsMfOrg.isLineEditMode.value) {
          submittingStateMfOrg.value = true
          $f.axios
            .post('/comm/mf/update-mf-org', lineFormParam)
            .then(() => {
              ldhMfOrg.lineDetailNav.doneLineEdit()
              loadModelData()
            })
            .catch((err) => {
              serverErrorMessageMfOrg.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingStateMfOrg.value = false
            })

        }
      }
    })

}

// 删除明细
const deleteMfOrgLine = function (mfOrgId: string | number) {
  void $f.ui.messageBox({
    caption: t('操作确认'),
    text: t('确定要删除该客商别吗?'),
    icon: 'Warning',
    buttons: 'OkCancel',
    delayClose: true,
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/comm/mf/delete-mf-org/' + mfOrgId)
        .then(() => {
          $f.ui.closeMsgBox()
          loadModelData()
          ldhMfOrg.lineDetailNav.backToListTab()
        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: t('删除失败'),
            text: $f.getAxiosErrMsg(err),
            icon: $f.getAxiosErrIcon(err),
            buttons: 'Close',
          })
        })
    }
  })
}
// endregion

// region 联系人相关
// 性别下拉
const sexList: GenericDropdownListItem[] = [
  {
    label: t('男'),
    value: 'M',
  },
  {
    label: t('女'),
    value: 'F',
  },
]
// 在职/离职下拉
const contactStateList: GenericDropdownListItem[] = [
  {
    label: t('在职'),
    value: '1',
  },
  {
    label: t('离职'),
    value: '0',
  },
]
// 列参数
let columnsInfoMfContact: ColumnInfo[] = [
  {
    name: 'operation',
    label: t('操作'),
    field: 'operation',
    align: 'left',
    defOrder: 1,
    defVisible: true,
  },
  {
    label: 'ID',
    name: 'contactId',
    field: 'contactId',
    align: 'left',
    defOrder: 2,
    defVisible: true,
  },
  {
    label: t('姓名'),
    name: 'contactName',
    field: 'contactName',
    align: 'left',
    defOrder: 3,
    defVisible: true,
  },
  {
    label: t('生日'),
    name: 'birthday',
    field: 'birthday',
    align: 'left',
    defOrder: 4,
    defVisible: true,
    format: (value: any) => $f.fmt.dtFmtDateOnly(value as string),
  },
  {
    label: t('性别'),
    name: 'sex',
    field: 'sex',
    align: 'left',
    defOrder: 5,
    defVisible: true,
  },
  {
    label: t('联系电话'),
    name: 'phone',
    field: 'phone',
    align: 'left',
    defOrder: 6,
    defVisible: true,
  },
  {
    label: t('手机'),
    name: 'mobile',
    field: 'mobile',
    align: 'left',
    defOrder: 7,
    defVisible: true,
  },
  {
    label: t('邮箱'),
    name: 'email',
    field: 'email',
    align: 'left',
    defOrder: 8,
    defVisible: true,
  },
  {
    label: t('联系人状态'),
    name: 'contactState',
    field: 'contactState',
    align: 'left',
    defOrder: 9,
    defVisible: true,
  },
  {
    label: t('家庭地址'),
    name: 'homeAddress',
    field: 'homeAddress',
    align: 'left',
    defOrder: 10,
    defVisible: true,
  },
  {
    label: t('个人喜好'),
    name: 'hobby',
    field: 'hobby',
    align: 'left',
    defOrder: 11,
    defVisible: true,
  },
  {
    label: t('描述'),
    name: 'descriptions',
    field: 'descriptions',
    align: 'left',
    defOrder: 12,
    defVisible: true,
  },
]
// 错误信息内容
let serverErrorMessageMfContact = ref('')
// 加载状态
let lineLoadingStateMfContact = ref(false)

// 客商别数据详情
const loadLineModelDataMfContact = function () {
  lineLoadingStateMfContact.value = true
  $f.axios
    .get<MfOrgFull>('/comm/mf/get-mf-contact-by-id/' + (ldhMfContact.lineDetailInfo.lineItemId as string | number).toString())
    .then((resp) => {
      ldhMfContact.lineDetailInfo.lineForm = resp.data
      ldhMfContact.lineDetailInfo.lineForm.birthday = $f.fmt.dtFmtDateOnly(ldhMfContact.lineDetailInfo.lineForm.birthday as string)
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      lineLoadingStateMfContact.value = false
    })
}

const ldhMfContact = useLineDetailHelper(
  t('客商联系人'),
  'mfContactLine',
  'mfContactDetail',
  null,
  loadLineModelDataMfContact,
  showingTabPanel,
  serverErrorMessageMfContact,
  () => {
    v$mfContact.value.$reset()
  },
)

const ldsMfContact = ldhMfContact.lineDetailStatus

// 新建明细
const createMfContactLine = function () {
  ldhMfContact.lineDetailNav.goCreateLine({
    mfId: $d.form.mfId,
  })
}

// 客商别验证
const rulesMfContact = {
  contactName: {
    required: validators.required,
    realName: validators.realName,
  },
  birthday: {
    date: validators.date,
  },
}

const v$mfContact = useVuelidate(rulesMfContact, computed(() => ldhMfContact.lineDetailInfo.lineForm as any), {$autoDirty: true})

// 提交状态
let submittingStateMfContact = ref(false)

// 新建/编辑确定
const doMfContactLineSubmit = function () {
  serverErrorMessageMfContact.value = ''
  void v$mfContact.value
    .$validate()
    .then((valRes) => {
      if (valRes) {
        let lineFormParam = $f.misc.removePropertyOfNull(ldhMfContact.lineDetailInfo.lineForm)
        if (ldsMfContact.isLineCreateMode.value) {
          submittingStateMfContact.value = true
          $f.axios
            .post('/comm/mf/create-mf-contact', lineFormParam)
            .then(() => {
              ldhMfContact.lineDetailNav.backToListTab()
              loadModelData()
            })
            .catch((err) => {
              serverErrorMessageMfContact.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingStateMfContact.value = false
            })

        } else if (ldsMfContact.isLineEditMode.value) {
          submittingStateMfContact.value = true
          $f.axios
            .post('/comm/mf/update-mf-contact', lineFormParam)
            .then(() => {
              ldhMfContact.lineDetailNav.doneLineEdit()
              loadModelData()
            })
            .catch((err) => {
              serverErrorMessageMfContact.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingStateMfContact.value = false
            })

        }
      }
    })

}

// 删除明细
const deleteMfContactLine = function (mfContactId: string | number) {
  void $f.ui.messageBox({
    caption: t('操作确认'),
    text: t('确定要删除该联系人吗?'),
    icon: 'Warning',
    buttons: 'OkCancel',
    delayClose: true,
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/comm/mf/delete-mf-contact/' + mfContactId)
        .then(() => {
          $f.ui.closeMsgBox()
          loadModelData()
          ldhMfContact.lineDetailNav.backToListTab()
        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: t('删除失败'),
            text: $f.getAxiosErrMsg(err),
            icon: $f.getAxiosErrIcon(err),
            buttons: 'Close',
          })
        })
    }
  })
}
// endregion

// region 初始化

// ************  处理field-options相关内容 ************
// 字段的显示/隐藏
$f.misc.simpleAssign($d.actualFieldShown, props.fieldOptions)
// 处理自定义label
_.forEach(props.fieldOptions, (value, key) => {
  if (value?.label) {
    $d.actualFieldLabel[key] = value.label
  }
})
// MfOrg
let colsInfoSavedMfOrg = dlAssist.loadDetailColOptions('mfOrgLine', columnsInfoMfOrg)
columnsInfoMfOrg = colsInfoSavedMfOrg[0]
$d.visibleColumnsMfOrg = colsInfoSavedMfOrg[1]
$d.paginationInfoMfOrg.rowsPerPage = dlAssist.loadDetailPageSize('mfOrgLine')

//MfContact
let colsInfoSavedMfContact = dlAssist.loadDetailColOptions('mfContactLine', columnsInfoMfContact)
columnsInfoMfContact = colsInfoSavedMfContact[0]
$d.visibleColumnsMfContact = colsInfoSavedMfContact[1]
$d.paginationInfoMfContact.rowsPerPage = dlAssist.loadDetailPageSize('mfContactLine')

const fx = $f
const e$ = $f.getFieldErrStr
// endregion
</script>
